<template>
  <div class="demand-detail">
    <el-card>
      <h2>{{ demand.title }}</h2>
      <p><b>类型：</b>{{ demand.type }}</p>
      <p><b>预算/价格：</b>{{ demand.budget }}</p>
      <p><b>描述：</b>{{ demand.description }}</p>
      <p><b>联系方式：</b>{{ demand.contact }}</p>
      <el-divider />
      <el-button type="primary" @click="respond">我要响应</el-button>
    </el-card>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const demand = ref({
  id: route.params.id,
  title: "二手iPhone出售",
  type: "商品买卖",
  budget: "2000元",
  description: "9成新iPhone 12，带原装配件，支持当面验机。",
  contact: "微信：abc123",
});
function respond() {
  alert("响应功能待开发");
}
</script>
<style scoped>
.demand-detail {
  max-width: 700px;
  margin: 40px auto;
}
</style>
